@use "everything" as *;

.container {
  position: relative;
  width: 100%;
}

.tooltip {
  left: var(--offset, 0%);
  position: absolute;
  top: calc(100% + 1em);
  transform: translateX(-50%);
  transition:
    left $linear-duration $linear-timing-function,
    background-color 0.3s;
  will-change: left, right;

  @include rtl {
    left: auto;
    right: var(--offset, 0%);
  }
}
